<template>
<div>
    <div v-if="!isPublished">
        表单未发布
    </div>
    <div v-if="isTimeOut">
        表单已截至
    </div>

    <div v-if="isPublished && !isTimeOut">
        <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
                <h1>{{ formInfo.formName }}</h1>
            </div>
            <!-- 题目列表 -->
            <div v-for="(item, index) in questionArray" :key="(item, index)">
                <el-card class="box-card" shadow="hover">
                    <!-- 填空题 -->
                    <div v-if="item.questionType == 0">
                        <span v-if="item.must" style="color: red">*&nbsp;</span>
                        <span style="font-weight: bold"
                            >第{{ index + 1 }}题&nbsp;|&nbsp;{{
                                item.questionName
                            }}</span
                        >&nbsp;
                        <el-tag
                            type="info"
                            v-show="
                                item.must && answerArray[index].answer == null
                            "
                            >未完成</el-tag
                        ><br /><br />
                        <el-input
                            v-model="answerArray[index].answer"
                            style="width: 65%"
                            type="textarea"
                            placeholder="请输入内容"
                        ></el-input
                        >&nbsp;
                        <br />
                    </div>

                    <!-- 单选题 -->
                    <div v-if="item.questionType == 1">
                        <span v-if="item.must" style="color: red">*&nbsp;</span>
                        <span style="font-weight: bold"
                            >第{{ index + 1 }}题&nbsp;|&nbsp;{{
                                item.questionName
                            }}</span
                        >&nbsp;
                        <el-tag
                            type="info"
                            v-show="
                                item.must && answerArray[index].optionId == null
                            "
                            >未完成</el-tag
                        ><br /><br />
                        <el-radio-group v-model="answerArray[index].optionId">
                            <div
                                v-for="(item0, index0) in item.options"
                                :key="(item0, index0)"
                            >
                                <el-radio :label="item0.id"
                                    >{{ item0.content }}<br /><br
                                /></el-radio>
                            </div>
                        </el-radio-group>
                    </div>
                    <!-- 多选题 -->
                    <div v-if="item.questionType == 2">
                        <span v-if="item.must" style="color: red">*&nbsp;</span>
                        <span style="font-weight: bold"
                            >第{{ index + 1 }}题&nbsp;|&nbsp;{{
                                item.questionName
                            }}</span
                        >&nbsp;
                        <el-tag
                            type="info"
                            v-show="
                                item.must &&
                                answerArray[index].optionId.length == 0
                            "
                            >未完成</el-tag
                        ><br /><br />

                        <el-checkbox-group
                            v-model="answerArray[index].optionId"
                            :min="item.optionMin"
                            :max="item.optionMax"
                        >
                            <el-checkbox
                                v-for="(item0, index0) in questionArray[index]
                                    .options"
                                :label="item0.id"
                                :key="(item0, index0)"
                                >{{ item0.content }}</el-checkbox
                            >
                        </el-checkbox-group>
                    </div>

                    <!-- 下拉框 -->
                    <div v-if="item.questionType == 3">
                        <span v-if="item.must" style="color: red">*&nbsp;</span>
                        <span style="font-weight: bold"
                            >第{{ index + 1 }}题&nbsp;|&nbsp;{{
                                item.questionName
                            }}</span
                        >&nbsp;
                        <el-tag
                            type="info"
                            v-show="
                                item.must && answerArray[index].optionId == null
                            "
                            >未完成</el-tag
                        ><br /><br />

                        <el-select
                            v-model="answerArray[index].optionId"
                            placeholder="请选择"
                        >
                            <el-option
                                v-for="(item0, index0) in questionArray[index]
                                    .options"
                                :key="(item0, index0)"
                                :label="item0.content"
                                :value="item0.id"
                            >
                            </el-option>
                        </el-select>
                    </div>

                    <!-- 滑动条 -->
                    <div v-if="item.questionType == 4">
                        <span v-if="item.must" style="color: red">*&nbsp;</span>
                        <span style="font-weight: bold"
                            >第{{ index + 1 }}题&nbsp;|&nbsp;{{
                                item.questionName
                            }}</span
                        >&nbsp;
                        <el-tag
                            type="info"
                            v-show="
                                item.must && answerArray[index].answer == null
                            "
                            >未完成</el-tag
                        ><br /><br />

                        <el-slider
                            :min="item.slideMin"
                            :max="item.slideMax"
                            v-model="answerArray[index].answer"
                            style="width: 40%"
                        ></el-slider>
                    </div>
                    <!-- 日期时间选择 -->
                    <div v-if="item.questionType == 5">
                        <span v-if="item.must" style="color: red">*&nbsp;</span>
                        <span style="font-weight: bold"
                            >第{{ index + 1 }}题&nbsp;|&nbsp;{{
                                item.questionName
                            }}</span
                        >&nbsp;
                        <el-tag
                            type="info"
                            v-show="
                                item.must &&
                                answerArray[index].beginAndEnd == null
                            "
                            >未完成</el-tag
                        ><br /><br />

                        <el-date-picker
                            v-model="answerArray[index].beginAndEnd"
                            type="datetimerange"
                            :picker-options="pickerOptions"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            align="right"
                        >
                        </el-date-picker>
                    </div>
                </el-card>
                <br />
            </div> </el-card
        ><br />

        <el-button
            icon="el-icon-s-promotion"
            type="success"
            @click="AnswerCheck"
            >提交表单</el-button
        >
        <el-dialog title="提交表单" :visible.sync="dialogVisible" width="30%">
            <span>确定提交表单吗？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="SubmitFormAnswer"
                    >确 定</el-button
                >
            </span>
        </el-dialog>
        <br />
        <div>{{ formInfo }}</div>
        <br />
        <div>{{ answerArray }}</div>
    </div>
</div>
</template>

<script>
import { nanoid } from "nanoid"; //生成id的接口
import { getFormInfo } from "@/api/userfill.js"; //获取题目信息
import { reviseBlank } from "@/api/userfill.js"; //修改填空
import { reviseRadio } from "@/api/userfill.js"; //修改单选
import { reviseCheckbox } from "@/api/userfill.js"; //修改多选
import { reviseListbox } from "@/api/userfill.js"; //修改下拉
import { reviseSlide } from "@/api/userfill.js"; //修改滑动
import { reviseDateAndTime } from "@/api/userfill.js"; //修改日期时间
import { submitFormAnswer } from "@/api/userfill.js"; //提交表单

export default {
    data() {
        return {
            isPublished: null,
            isTimeOut: null,
            dialogVisible: false,
            formInfo: [], //表单信息
            questionArray: [], //所有题目数组
            answerArray: [], //答案数组
            pickerOptions: {
                shortcuts: [
                    {
                        text: "最近一周",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 7
                            );
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近一个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 30
                            );
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近三个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 90
                            );
                            picker.$emit("pick", [start, end]);
                        },
                    },
                ],
            },
        };
    },
    //页面刷新自动调用的方法,从后台获取表单题目
    created() {
        //j7EAx01Sf6rElFP7nyeNF 填空题测试
        //pYRkRGMXKxPcGvrlIjxQj 滑动条测试
        //hi4rIVfVU1V7vxPKs0Wn4 填空题测试
        //mUwhEEidMpnjlWqNy8cOy 多选题测试
        //diqPM1oXt_-xfFvCICg_p 多选题测试
        //Rpr0YpEktUcdurUq8PlQh 日期时间选择测试
        //wN2IJgNZa565wc172yhkQ 全题型测试
        var formId = this.$route.query.formId; //获取跳转参数：表单id
        this.GetFormInfo(formId); //根据表单id查询表单内容
    },
    methods: {
        //根据表单id获取表单内容
        GetFormInfo(formId) {
            //打包数据
            var params = {
                formId: formId, //表单id
            };
            //保存this
            var that = this;
            //调用接口，新建表单
            getFormInfo(params)
                .then((response) => {
                    console.log(response);

                    if (response.form.formInfo.formStatus != 1) {
                        that.isPublished = false;
                        return;
                    }
                    if (
                        response.form.formInfo.timeLimit &&
                        response.form.formInfo.endTime < new Date()
                    ) {
                        that.isTimeOut = true;
                        return;
                    }
                    that.$message({
                        message: "查询表单信息成功",
                        type: "success",
                    });
                    that.formInfo = response.form.formInfo; //获取到表单信息
                    that.questionArray = response.form.questions; //获取到问题数组
                    if (!response.form.answers) {
                        that.CreateAnswerArray();
                    } else if (response.form.answers) {
                        that.answerArray = response.form.answers;
                        for (var i = 0; i < that.questionArray.length; i++) {
                            if (that.answerArray[i] == null) {
                                switch (that.questionArray[i].questionType) {
                                    case 0: //填空题
                                        var params = {
                                            id: nanoid(),
                                            formId: that.formInfo.id,
                                            questionId:
                                                that.questionArray[i].id,
                                            answer: null,
                                            createTime: null,
                                            isSubmit: false,
                                        };
                                        that.answerArray[i] = params;
                                        break;
                                    case 1: //单选题
                                        var params = {
                                            id: nanoid(),
                                            formId: that.formInfo.id,
                                            questionId:
                                                that.questionArray[i].id,
                                            optionId: null,
                                            createTime: null,
                                            isSubmit: false,
                                        };
                                        that.answerArray[i] = params;
                                        break;
                                    case 2: //多选题
                                        var params = {
                                            id: nanoid(),
                                            formId: that.formInfo.id,
                                            questionId:
                                                that.questionArray[i].id,
                                            optionId: [],
                                            createTime: null,
                                            isSubmit: false,
                                        };
                                        that.answerArray[i] = params;
                                        break;
                                    case 3: //下拉框
                                        var params = {
                                            id: nanoid(),
                                            formId: that.formInfo.id,
                                            questionId:
                                                that.questionArray[i].id,
                                            optionId: null,
                                            createTime: null,
                                            isSubmit: false,
                                        };
                                        that.answerArray[i] = params;
                                        break;
                                    case 4: //滑动条
                                        var params = {
                                            id: nanoid(),
                                            formId: that.formInfo.id,
                                            questionId:
                                                that.questionArray[i].id,
                                            answer: null,
                                            createTime: null,
                                            isSubmit: false,
                                        };
                                        that.answerArray[i] = params;
                                        break;
                                    case 5: //日期时间选择
                                        var params = {
                                            id: nanoid(),
                                            formId: that.formInfo.id,
                                            questionId:
                                                that.questionArray[i].id,
                                            beginAndEnd: [],
                                            createTime: null,
                                            isSubmit: false,
                                        };
                                        that.answerArray[i] = params;
                                        break;
                                }
                            }
                        }
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //生成答案数组
        CreateAnswerArray() {
            for (var i = 0; i < this.questionArray.length; i++) {
                switch (this.questionArray[i].questionType) {
                    case 0: //填空题
                        var params = {
                            id: nanoid(),
                            formId: this.formInfo.id,
                            questionId: this.questionArray[i].id,
                            answer: null,
                            createTime: null,
                            isSubmit: false,
                        };
                        this.answerArray.splice(i, 0, params);
                        break;
                    case 1: //单选题
                        var params = {
                            id: nanoid(),
                            formId: this.formInfo.id,
                            questionId: this.questionArray[i].id,
                            optionId: null,
                            createTime: null,
                            isSubmit: false,
                        };
                        this.answerArray.splice(i, 0, params);
                        break;
                    case 2: //多选题
                        var params = {
                            id: nanoid(),
                            formId: this.formInfo.id,
                            questionId: this.questionArray[i].id,
                            optionId: [],
                            createTime: null,
                            isSubmit: false,
                        };
                        this.answerArray.splice(i, 0, params);
                        break;
                    case 3: //下拉框
                        var params = {
                            id: nanoid(),
                            formId: this.formInfo.id,
                            questionId: this.questionArray[i].id,
                            optionId: null,
                            createTime: null,
                            isSubmit: false,
                        };
                        this.answerArray.splice(i, 0, params);
                        break;
                    case 4: //滑动条
                        var params = {
                            id: nanoid(),
                            formId: this.formInfo.id,
                            questionId: this.questionArray[i].id,
                            answer: null,
                            createTime: null,
                            isSubmit: false,
                        };
                        this.answerArray.splice(i, 0, params);
                        break;
                    case 5: //日期时间选择
                        var params = {
                            id: nanoid(),
                            formId: this.formInfo.id,
                            questionId: this.questionArray[i].id,
                            beginAndEnd: [],
                            createTime: null,
                            isSubmit: false,
                        };
                        this.answerArray.splice(i, 0, params);
                        break;
                }
            }
        },
        //修改填空题
        ReviseBlank(i) {
            //打包数据
            var params = this.answerArray[i];
            console.log(params);
            params.createTime = new Date();
            console.log(params);
            //保存this
            var that = this;
            //调用接口，发送请求
            reviseBlank(params)
                .then((response) => {
                    console.log(response);
                    that.$message({
                        message: "修改填空题成功",
                        type: "success",
                    });
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //修改单选题
        ReviseRadio(i) {
            //打包数据
            var params = this.answerArray[i];
            params.createTime = new Date();
            //保存this
            var that = this;
            //调用接口，发送请求
            reviseRadio(params)
                .then((response) => {
                    console.log(response);
                    that.$message({
                        message: "修改单选题成功",
                        type: "success",
                    });
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //修改多选题
        ReviseCheckbox(i) {
            //打包数据
            var params = this.answerArray[i];
            params.createTime = new Date();
            //保存this
            var that = this;
            //调用接口，发送请求
            reviseCheckbox(params)
                .then((response) => {
                    console.log(response);
                    that.$message({
                        message: "修改多选题成功",
                        type: "success",
                    });
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //修改下拉
        ReviseListbox(i) {
            //打包数据
            var params = this.answerArray[i];
            params.createTime = new Date();
            //保存this
            var that = this;
            //调用接口，发送请求
            reviseListbox(params)
                .then((response) => {
                    console.log(response);
                    that.$message({
                        message: "修改下拉框成功",
                        type: "success",
                    });
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //修改滑动
        ReviseSlide(i) {
            //打包数据
            var params = this.answerArray[i];
            params.createTime = new Date();
            //保存this
            var that = this;
            //调用接口，发送请求
            reviseSlide(params)
                .then((response) => {
                    console.log(response);
                    that.$message({
                        message: "修改滑动条成功",
                        type: "success",
                    });
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //修改日期时间选择
        ReviseDateAndTime(i) {
            //打包数据
            var params = this.answerArray[i];
            params.createTime = new Date();
            //保存this
            var that = this;
            //调用接口，发送请求
            reviseDateAndTime(params)
                .then((response) => {
                    console.log(response);
                    that.$message({
                        message: "修改日期时间成功",
                        type: "success",
                    });
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //检查必选的答案是否填写完全
        AnswerCheck() {
            for (var i = 0; i < this.answerArray.length; i++) {
                if (this.questionArray[i].must == true) {
                    switch (this.questionArray[i].questionType) {
                        case 0:
                            if (this.answerArray[i].answer == null) {
                                this.$message.error(
                                    "请检查第" + (i + 1) + "题"
                                );
                                return;
                            }
                            break;
                        case 1:
                            if (this.answerArray[i].optionId == null) {
                                this.$message.error(
                                    "请检查第" + (i + 1) + "题"
                                );
                                return;
                            }
                            break;
                        case 2:
                            if (this.answerArray[i].optionId == []) {
                                this.$message.error(
                                    "请检查第" + (i + 1) + "题"
                                );
                                return;
                            }
                            break;
                        case 3:
                            if (this.answerArray[i].optionId == null) {
                                this.$message.error(
                                    "请检查第" + (i + 1) + "题"
                                );
                                return;
                            }
                            break;
                        case 4:
                            break;
                        case 5:
                            break;
                    }
                }

                if (
                    this.questionArray[i].must == true &&
                    this.answerArray[i].answer == ""
                ) {
                    this.$message.error("请检查，确保答案填写完全");
                    return;
                }
            }
            this.dialogVisible = true;
        },

        //向后端发送提交表单的请求
        SubmitFormAnswer() {
            //打包数据
            var params = {
                formId: this.formInfo.id,
            };
            //调用接口，保存表单
            submitFormAnswer(params)
                .then((response) => {
                    this.dialogVisible = false;
                    this.$message({
                        message: "表单提交成功",
                        type: "success",
                    });
                    console.log(response);
                })
                .catch((error) => {
                    console.log(error);
                });
        },
    },
    //数据加工
    computed: {
        aArray() {
            //答案数组
            return JSON.parse(JSON.stringify(this.answerArray));
        },
        // dateFormat(originVal){
        // const dt =new Date(originVal)
        // const y = dt.getFullYear()
        // const m = (dt.getMonth() + 1 + '').padStart(2,0)
        // const d = (dt.getDate() + '').padStart(2,0)
        // const hh = (dt.getHours() + '').padStart(2,0)
        // const mm = (dt.getMinutes() + '').padStart(2,0)
        // const ss = (dt.getSeconds() + '').padStart(2,0)
        // return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
        // },
    },
    watch: {
        aArray: {
            //监听答案变动
            handler(newVal, oldVal) {
                if (oldVal.length == 0) {
                    return;
                }
                for (var i = 0; i < newVal.length; i++) {
                    switch (this.questionArray[i].questionType) {
                        case 0: //填空题变动
                            if (newVal[i].answer != oldVal[i].answer) {
                                console.log("填空变了");
                                this.ReviseBlank(i);
                                return;
                            }
                            break;
                        case 1: //单选题变动
                            if (newVal[i].optionId != oldVal[i].optionId) {
                                console.log("单选变了");
                                this.ReviseRadio(i);
                                return;
                            }
                            break;
                        case 2: //多选题变动
                            if (
                                newVal[i].optionId.length !=
                                oldVal[i].optionId.length
                            ) {
                                console.log("多选变了");
                                this.ReviseCheckbox(i);
                                return;
                            }
                            break;
                        case 3: //下拉框变动
                            if (newVal[i].optionId != oldVal[i].optionId) {
                                console.log("下拉变了");
                                this.ReviseListbox(i);
                                return;
                            }
                            break;
                        case 4: //滑动条变动
                            if (newVal[i].answer != oldVal[i].answer) {
                                this.ReviseSlide(i);
                                return;
                            }
                            break;
                        case 5: //日期时间变动
                            if (
                                newVal[i].beginAndEnd[0] !=
                                    oldVal[i].beginAndEnd[0] ||
                                newVal[i].beginAndEnd[1] !=
                                    oldVal[i].beginAndEnd[1]
                            ) {
                                console.log("日期时间变了");
                                this.ReviseDateAndTime(i);
                                return;
                            }
                            break;
                    }
                }
            },
            deep: true,
        },
    },
};
</script>
